<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Ensambla car</title>
            </f:facet>
            <h:outputStylesheet library="css" name="ensamblaCar.css"  />
        </h:head>
    <h:body>
        <h:form id="formAgregarVersion">
        <h:panelGroup id="panelAgregarVersion">
        <table>
            <tr>
                <td><label class="textoFormulario">Nombre Version</label></td>
                <td><h:inputText styleClass="inputFormulario" value="#{gestionadorVersionMB.nombreVersion}"></h:inputText>
                </td>
            </tr>
            <tr>
                <td><label class="textoFormulario">Caja Velocidad</label></td>
                <td><h:inputText styleClass="inputFormulario" value="#{gestionadorVersionMB.cajaVelocidad}"></h:inputText>
                </td>
            </tr>
            <tr>
                <td><label class="textoFormulario">Nº Puertas</label></td>
                <td><h:inputText styleClass="inputFormulario" value="#{gestionadorVersionMB.numPuertas}"></h:inputText>
                </td>
            </tr>

            <tr>
                <td><label class="textoFormulario">Fábrica</label></td>
                <td>
                    <h:selectOneMenu styleClass="selectFormulario" value="#{gestionadorVersionMB.numeroModeloSelect}">
                        <f:selectItems value="#{gestionadorModeloMB.modelos}" var="modelos"
                                       itemValue="#{modelos.numeroModelo}" itemLabel="#{modelos.nombre}"/>
                   </h:selectOneMenu>
                </td>
            </tr>
            
        </table>
            <p:commandButton action="#{gestionadorVersionMB.agregarVersion}" value="Agregar" update=":mantenedorVersion:versionList :formAgregarVersion:panelAgregarVersion"></p:commandButton>
            </h:panelGroup> 
        </h:form>
        <h:form id="mantenedorVersion">
        <p:growl id="messages" showDetail="true"/>  
        <p:dataTable var="version" value="#{gestionadorVersionMB.versiones}"  id="versionList"
                     editable="true">

            <f:facet name="header">
                Versiones
            </f:facet>

            <p:ajax event="rowEdit" listener="#{gestionadorVersionMB.onEdit}"  update=":mantenedorVersion:versionList"/>
            <p:ajax event="rowEditCancel" listener="#{gestionadorVersionMB.onCancel}" update=":mantenedorVersion:versionList"/>

            <p:column headerText="N° Version" style="width:30%">
                <h:outputText value="#{version.numVersion}" />
            </p:column>

            <p:column headerText="Nombre Versión" style="width:20%">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{version.nombreVersion}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{version.nombreVersion}" style="width:100%" label="nombreVersion"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="Puertas" style="width:20%">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{version.numPuertas}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{version.numPuertas}" style="width:100%" label="puertas"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="Caja Velocidad" style="width:20%">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{version.cajaVelocidad}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{version.cajaVelocidad}" style="width:100%" label="cajaVelocidad"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="Modelo" style="width:30%">
                    <h:outputText value="#{version.modelo.nombre}" />
            </p:column>

            <p:column style="width:6%">
                <p:rowEditor />
            </p:column>

        </p:dataTable>
        </h:form>
    </h:body>
    </f:view>
</html>

